<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">发送请求</button>
    <script>
        let btn = document.querySelector('.btn');

        btn.onclick = function(){
            // 1.创建一个XMLHttpRequest对象（数据交互对象）
            let xhr = new XMLHttpRequest();

            // 2.初始换请求
            // xhr.open(method,url,boolean)
            // method 亲求的方式可以为get post
            // url 请求地址
            // boolean 布尔值 默认为true异步 false同步

            // 当用get发送请求的时候会出现缓存的问题（浏览器的缓存机制）
            // 当多次发送请求，如果请求的地址一样，从二次请求开始就可能有缓存问题
            // 确保每一次请求的地址不一致

            xhr.open('get','http://localhost:9999/users/getlist?page=2&size=4&_='+Date.now(),true);

            // 3.将请求发送到服务端
            // xhr.send(params);
            // params 请求体中的数据
            // params get 请求时候传入null
            // params post 请求的时候传入查询字符串

            xhr.send(null);

            // 4.等待请求和响应状体改变

            // xhr.readyState 请求状态为5种状态
            // xhr.readyState === 0 请求初始化 （未调用open方法）
            // xhr.readyState === 1 请求初始化，于服务器建立链接 （调用open方法）
            // xhr.readyState === 2 请求接收 （调用send方法）
            // xhr.readyState === 3 请求处理中 （处于 loading 状态）
            // xhr.readyState === 4 请求以完成 （处于 done 状态）



            // xhr.status 响应状态

            // 200 响应成功
            // 301 重定向 （资源永久转移）
            // 302 重定向 （资源临时转移）
            // 304 使用缓存资源 （资源没有更新）
            // 403 资源不可用 （权限问题）
            // 404 找不到资源 （服务器无法响应）
            // 500 服务器内部错误

            // 当xhr.onreadystatechange 状态发生改变的时候，会触发readystatechange事件

            xhr.onreadystatechange = function (){
                if(xhr.readyState === 4){
                    if(xhr.status  === 200){
                        // xhr.responseText 响应文本数据
                        // xhr.responseXMl 响应XMl数据
                        console.log('请求成功',xhr.responseText);

                        // 将JOSN字符串转成JOSN对象
                        console.log(JOSN.parse(xhr.responseText));
                    }else{
                        // 请求失败就得查看它的响应状态
                        console.log('请求失败',xhr.status);
                    }
                }

            }





        }

    </script>
</body>
</html>